<template>
    <div class="accessibility-wrapper jimu-map-panel jimu-show" :class="{ 'disabled': disabled }">
        <ul v-show="showTypeList" class="distance-list">
            <li v-for="(type,index) in config.typeList" :key="`type-${index}`">
                <div class="distance-type" @click="switchType(index)" :class="{'active': currentTypeIndex == index}">
                    <i :class="type.style"></i>
                    <span>{{type.name}}</span>
                </div>
            </li>
        </ul>

        <div class="timeline-type">
            <div class="timeline-type-current" @click="toggleTypeList">
                <i :class="config.typeList[this.currentTypeIndex].style"></i>
                <span>{{config.typeList[this.currentTypeIndex].name}}</span>
            </div>
            <!-- <div class="time">
                <div class="morning" :class="{'active': period === 'early-peak'}" @click="switchPeriod('early-peak')">早</div>
                <div class="noon" :class="{'active': period === 'usual'}" @click="switchPeriod('usual')">平时</div>
                <div class="night" :class="{'active': period === 'late-peak'}" @click="switchPeriod('late-peak')">晚</div>
            </div> -->
        </div>
        
        <div class="time-line-container">
            <time-line 
                v-on:change="changeTime"
                :disabled="disabled"
                :end="end"
                :min="min"
                :colorGradients="config.colorGradients"
                :value="time">
            </time-line>
        </div>
        
        <div class="close-btn jimu-map-panel" @click="close">
            <i class="g-icon-close"></i>
        </div>
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget'
import Timeline from './components/TimeLine'
import {isochrone as isochroneAPI} from '@/api'
import { Message } from 'element-ui';
export default {
    name: 'IsochroneWidget',
	mixins:[ BaseWidget ],
    components: {
        'time-line': Timeline
    },
    data () {
        return {
            showTypeList: false,
            time: 20,
            end: 90,
            min: 5,
            currentTypeIndex: 0,
            period: 'usual',
            merge: false,
            inSR: "wm-gcj02",
            outSR: "wm-gcj02",
            location: null,
            disabled:false,

            popNode: null
            
        }
    },
    computed: {
        isShowTime: function(){
            return this.config.typeList
        },
        map: function(){
			return this.shareState.map
		},
    },
    mounted() {
        this.addIsochroneLayer()
        this.bindMapClickEvent()
        this.popNode = this.createPopPanelNode()
        this.map._container.style.cursor='crosshair'
    },
    destroyed(){
        this.map.unbind('click', this.mapClick);
        this.map.unbind('mousemove', this.mouseMoveHandle)
        this.map.unbind('mouseleave', this.mouseLeaveHandle)
        if(this.isochroneLayer){
            this.isochroneLayer.clear()
            this.isochroneLayer.remove()
        }
        if(this.pointLayer){
            this.pointLayer.clear()
            this.pointLayer.remove()
        }
        this.map._container.style.cursor='default'
        this.map._container.removeChild(this.popNode)
        this.popNode = null
        
    },
    methods: {
        switchType(index) {
            if (this.disabled || this.currentTypeIndex == index) {
                return;
            }
            this.currentTypeIndex = index
            this.showTypeList = false
            this.createDistanceViz()
        },

        switchPeriod(period) {
            if (this.disabled) {
                return
            }
            this.period = period
            this.createDistanceViz()
        },

        changeTime(time) {
            this.time = time
            this.createDistanceViz()
        },

        toggleTypeList() {
            if (this.disabled) {
                return
            }
            this.showTypeList = !this.showTypeList
        },

        bindMapClickEvent(){
            this.map.bind('click', this.mapClick)
            this.map.bind('mousemove', this.mouseMoveHandle)
            this.map.bind('mouseleave', this.mouseLeaveHandle)
        },

        mouseMoveHandle: function(e){
            this.popNode.style.display = "block"
            let top,left
            if(e.screenX + this.popNode.offsetWidth < (this.map._container.clientWidth-5)){
                left = e.screenX + 5
            }else{
                left = e.screenX - this.popNode.offsetWidth - 5
            }
            if(e.screenY + this.popNode.offsetHeight < (this.map._container.clientHeight-5)){
                top = e.screenY + 5
            }else{
                top = e.screenY - this.popNode.offsetHeight - 5
            }

            this.popNode.style.left =left + "px"
            this.popNode.style.top = top + "px"
        },

        mouseLeaveHandle: function(){
            this.popNode.style.display = "none"
        },

        mapClick(event){
            if (this.disabled) {
                return
            }
            this.location = [event.mapX, event.mapY]
            this.addCenterPoint()
            this.createDistanceViz()
        },

        createDistanceViz(){
            if(!this.location) return
            this.bus.$emit("showLoading", true)
            this.disabled = true
            let type = this.config.typeList[this.currentTypeIndex].type
            let params = {
                time: this.time,
                // period: this.period,
                merge: this.merge,
                inSR: this.inSR,
                outSR: this.outSR,
                location: this.location,
            }
            isochroneAPI.getIsochrone(type, params).then((result)=>{
                this.bus.$emit("showLoading", false)
                this.disabled = false
                if(result.data.code === 0){
                    this.addBlockGraphics(result.data.data)
                }else{
                    Message.error(result.data.msg);
                }
            })
        },

        addIsochroneLayer: function(){
            this.isochroneLayer = (new G.Layer.Graphic()).addTo(this.map);
            this.pointLayer = (new G.Layer.Graphic()).addTo(this.map);
        },

        addBlockGraphics: function(blockData){
            if(!this.isochroneLayer){
                this.addIsochroneLayer()
            }
            
            this.isochroneLayer.clear()
            let timeArry = []
            blockData.forEach(block => {
                let color = this.getFillColor(block.time)
                let options = this.config.polygonStyle
                Object.assign(options,{
                    fillColor:color
                })
                let attr = {
                    time:block.time
                }
                var g = new G.Graphic.Polygon(block.geom, attr, options);
                g.addTo(this.isochroneLayer);
            });

            this.zoomToExtent(this.isochroneLayer.calcDataExtent())
        },

        getFillColor: function(time){
            return this.config.colorGradients[parseInt(time/this.config.colorStep)]
        },

        addCenterPoint: function(){
            this.pointLayer.clear()
            let point = new G.Graphic.Point(this.location, null, this.config.pointConfig);
            point.addTo(this.pointLayer);
        },

        zoomToExtent: function(extent){
            this.map.zoomExtent(extent)
        },

        createPopPanelNode: function(){
            let elNode = document.createElement("div")
            elNode.innerHTML = "点击查询等时圈"
            elNode.style.position = "absolute";
            elNode.style.display = "none";
            elNode.style.padding = "5px 8px";
            elNode.style.fontSize = "10px";
            elNode.style.backgroundColor = "rgba(67, 81, 93, 0.7)";
            elNode.style.color = "#fff";
            elNode.style.border = "2px solid #4087f7";
            elNode.style.borderRadius = "4px";
            this.map._container.appendChild(elNode)
            return elNode
        }
    },
}
</script>

<style lang="scss">

$base: #ffffff;
$darkBase: darken($base, 10%);

.accessibility-wrapper {
    position: absolute; 
    height: 52px;
    user-select: none;
    width: 320px;
    left:50%;
    bottom: 10px;
    margin-left: -160px;
    padding: 4px;
    &::after {
        content: '';
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }

    &.disabled {
        cursor:no-drop;
        opacity: .8;

        &::after {
            display: block;
        }
    }
    .close-btn{
        position: absolute;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        right: -10px;
        top: -10px;
        cursor: pointer;
    }
}

.timeline-type {
    float: left;
    display: block;
    width: 100px;
    height: 44px;
    line-height: 44px;
    padding-right: 4px;
    cursor: pointer;
    margin: 8px 0;

    .timeline-type-current {
        width: 100%;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
        position: relative;
        padding-left: 30px;
        padding-right: 10px;
        text-align: center;
        i {
            display: block;
            width: 20px;
            height: 20px;
            line-height: 18px;
            position: absolute;
            left: 10px;
            top: 4px;
            font-size: 16px;
        }
    }
    .time {
        display: none;
    }
}

.timeline-type.show-time {
    margin: 0 !important;
    .time {
        margin: 0 2px;
        display: block;
        background-color: lighten($base, 5%);
        height: 16px;
        border-radius: 3px;
        border: 1px solid #eee;
        font-size: 12px;

        >div {
            float: left;
            width: 33.33%;
            text-align: center;
            line-height: 16px;

            &.active {
                background-color: #409EFF;
                color: #fff;
            }
        }

        .morning {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .noon {
            border-left: 1px solid $darkBase;
            border-right: 1px solid $darkBase;
        }

        .ngiht {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }
    }
}

.distance-list {
    position: absolute;
    bottom: 49px;
    width: 104px;
    margin-left: -4px;
    background-color: $base;
    padding: 4px 0;

    .distance-type {
        height: 36px;
        line-height: 32px;
        text-align: center;
        padding: 2px 0;
        cursor: pointer;

        i {
            font-size: 16px;
            line-height: 16px;
            margin-right: 4px;
        }

        &:hover {
            background-color: $darkBase;
        }

        &.active {
            background-color: #409eff;
            color: #fff
        }
    }
}

.time-line-container {
    overflow: hidden;
    float: left;
}

</style>
